<template>
  <div class="bar-chart-13 chart" ref="barChart13"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart13 = ref(null);
const echarts = inject("$echarts");

// 参数
let yAxisData = ["公安分局", "园区运营", "党工委", "办公室", "经济发展局"];

let seriesData = [203, 176, 150, 122, 87];
let max = Math.max.apply(null, seriesData);
let getMax = [];
for (let i = 0; i < yAxisData.length; i++) {
  getMax.push(max);
}

const option = {
  compCode: "C202309053",
  backgroundColor: "#003366",
  grid: {
    left: "4%",
    right: "2%",
    bottom: "2%",
    top: "2%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    axisPointer: {
      type: "none",
    },
    formatter: function (params) {
      return params[0].name + " : " + params[0].value + "次";
    },
  },
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      offset: 100,

      axisLabel: {
        show: true,
        align: "left",
        textStyle: {
          color: "#66cc00",
        },
        formatter: function (value, index) {
          let num = "";
          let str = "";
          const no = "NO.";
          num = index + 1;
          if (index === 0) {
            str = "{no1|" + no + "} {num1|" + num + "} {title1|" + value + "}";
          } else if (index === 1) {
            str = "{no2|" + no + "} {num2|" + num + "} {title2|" + value + "}";
          } else if (index === 2) {
            str = "{no3|" + no + "} {num3|" + num + "} {title3|" + value + "}";
          } else {
            str = "{no|" + no + "} {num|" + num + "} {title|" + value + "}";
          }
          return str;
        },
        rich: {
          no: {
            color: "#d4d5d8",
            fontSize: 14,
          },
          no1: {
            color: "#ff4d4d",
            fontSize: 14,
          },
          no2: {
            color: "#4dd2ff",
            fontSize: 14,
          },
          no3: {
            color: "#f6b66b",
            fontSize: 14,
          },
          num: {
            color: "#fff",
            backgroundColor: "#d4d5d8",
            width: 20,
            height: 20,
            fontSize: 14,
            align: "center",
            borderRadius: 100,
          },
          num1: {
            color: "#fff",
            backgroundColor: "#ff4d4d",
            width: 20,
            height: 20,
            fontSize: 14,
            align: "center",
            borderRadius: 100,
          },
          num2: {
            color: "#fff",
            backgroundColor: "#4dd2ff",
            width: 20,
            height: 20,
            fontSize: 14,
            align: "center",
            borderRadius: 100,
          },
          num3: {
            color: "#fff",
            backgroundColor: "#f6b66b",
            width: 20,
            height: 20,
            fontSize: 14,
            align: "center",
            borderRadius: 100,
          },
          title: {
            color: "#d4d5d8",
          },
          title1: {
            color: "#ff4d4d",
          },
          title2: {
            color: "#4dd2ff",
          },
          title3: {
            color: "#f6b66b",
          },
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: yAxisData,
    },
    {
      type: "category",
      inverse: true,
      offset: -50,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: "12",
        },
        formatter(val) {
          return val + " 次";
        },
      },
      data: seriesData,
    },
  ],
  series: [
    {
      name: "值",
      type: "bar",
      zlevel: 1,
      itemStyle: {
        normal: {
          barBorderRadius: 30,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgb(128,204,255,1)",
            },
            {
              offset: 1,
              color: "rgb(46,200,207,1)",
            },
          ]),
        },
      },
      barWidth: 10,
      data: seriesData,
    },
    {
      name: "背景",
      type: "bar",
      barWidth: 10,
      barGap: "-100%",
      data: getMax,
      itemStyle: {
        normal: {
          color: "rgba(24,31,68,1)",
          barBorderRadius: 30,
        },
      },
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(barChart13.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
